<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>沙箱</title>
</head>
<body>
  <script>
    // 如果应用 刚开始加载A应用 window.a B应用(window.a);

    // 单应用切换 沙箱  创造一个干净的环境给这个子应用使用，当切换时 可以选择丢弃属性和恢复属性
    // JS沙箱 proxy
    // 快照沙箱 1年前拍一张 现在在拍一张 ，将区别保存起来，再回到一年前
    class SnapshotSandbox{
      constructor(){
        this.proxy = window   // window属性
        this.modifyPropsMap = {} // 记录在window上的修改
        this.active()
      }
      active(){ // 激活
        this.windowSnapShot = {} // 拍照
        for(const prop in window){
          if(window.hasOwnProperty(prop)){
            this.windowSnapShot[prop] = window[prop]
          }
        }
        Object.keys(this.modifyPropsMap).forEach(p=>{
          window[p] = this.modifyPropsMap[p]
        })

      }
      inactive(){ // 失活
        for(const prop in window){
          if(window.hasOwnProperty(prop)){
            if(window[prop] !== this.windowSnapShot[prop]){
              this.modifyPropsMap[prop] = window[prop]
              window[prop] = this.windowSnapShot[prop]
            }
          }
        }
      }
    }
    let sandbox = new SnapshotSandbox();
    ((window) => {
      window.a = 1
      window.b = 2
      console.log(window.a,window.b)
      sandbox.inactive()
      console.log(window.a,window.b)
      sandbox.active()
      console.log(window.a,window.b)
    })(sandbox.proxy) // sandbox.proxy就是window

    // 如果是多个子应用就不能使用这种方式了，es6的proxy
    // 代理沙箱可以实现多应用沙箱，把不同的应用用不同的代理来处理
  </script>
</body>
</html>